<template>
  <div class="account">
    <table class="account__manage">
      <tr>
        <td class="ptd" style="width: 150px;">头像</td>
        <td style="width: 300px;"><img :src="userInfo.avatarUrl" class="avatarUrl"></td>
        <td style="width: 70px;">
          <el-button type="primary" plain @click="changeInfoHandle">换绑</el-button>
        </td>
      </tr>
      <tr>
        <td class="ptd">昵称</td>
        <td>{{ userInfo.nikeName }}</td>
      </tr>
      <tr>
        <td class="ptd">注册账号</td>
        <td>{{ userInfo.phone }}</td>
        <td>
          <el-button type="primary" plain @click="changePhoneHandle">换绑</el-button>
        </td>
      </tr>
      <tr>
        <td class="ptd">密码</td>
        <td>******</td>
        <td>
          <el-button type="primary" plain @click="routerLinkHandle(publicPath + `/changepass?phone=${userInfo.phone}`)">修改</el-button>
        </td>
      </tr>
    </table>
    <ChangeInfo :visible.sync="accountVisible" :userInfo="userInfo"
                @refreshDataList="getRecentAccountInfo"/>
    <ChangePhone :visible.sync="phoneVisible" :userInfo="userInfo"
                 @refreshDataList="getRecentAccountInfo"/>
  </div>
</template>

<script lang="ts">
import {Vue, Component} from "vue-property-decorator";
import storage from "@/libs/storage";
import {getAccountInfo, verifyStateResult} from "@/api/sign";
import ChangeInfo from "@/views/businessCenter/Component/dialog/ChangeInfo.vue";
import ChangePhone from "@/views/businessCenter/Component/dialog/ChangePhone.vue";
import {logout} from "@/libs";

const publicPath = process.env.VUE_APP_PUBLICPATH;

@Component({
  components: {
    ChangeInfo,
    ChangePhone,
  },
})
export default class AccountManage extends Vue {
  /* 用户信息 */
  userInfo: any = {};

  /* 换绑微信弹窗 */
  accountVisible: boolean = false;

  /* 换绑手机弹窗 */
  phoneVisible: boolean = false;

  publicPath = publicPath;

  async created() {
    if (this.$route.query.code) {
      try {
        const cd = this.$route.query.code;
        history.pushState({}, "", process.env.VUE_APP_PUBLICPATH + "/business");
        const response = await verifyStateResult({
          code: cd,
        });
        const {code} = response.data;
        if (code === 200) {
          this.goBack();
        }
      } catch (e) {
        console.log(e, "err");
        this.$message({
          type: "warning",
          message: e,
        });
      }
    }
    await this.getRecentAccountInfo();
  }

  async getRecentAccountInfo() {
    if (storage.get("token")) {
      const response = await getAccountInfo();
      const {code, data, msg} = response.data;
      if (code === 200) {
        this.userInfo = data;
      }
    }
  }

  changeInfoHandle() {
    this.accountVisible = true;
  }

  changePhoneHandle() {
    this.phoneVisible = true;
  }

  routerLinkHandle(path) {
    this.$router.push(path);
  }

  goBack() {
    logout();
    this.$router.push("/login");
  }
}
</script>

<style lang="scss">
.account__back {
  padding: 20px 40px;
}
.account__manage {
  margin-top: 25px;
}

.avatarUrl {
  width: 60px;
  border-radius: 100%;
}

.ptd {
  padding: 20px 30px;
}
</style>
